<template>
  <view class="page">
    <!-- 指纹支付 start -->
    <view
      class="list-item solid-bottom justify-between"
      v-if="support == 2 || support == 3 || support == 5"
    >
      <text>{{ i18n["指纹支付"] }}</text>
      <switch
        @change="handleSwitch('is_default_fingerprint')"
        :color="colorTheme"
        class="theme"
        :class="is_default_fingerprint ? 'checked' : ''"
        :checked="is_default_fingerprint == 1 ? true : false"
      >
      </switch>
    </view>
    <!-- 指纹支付 end -->
    <!-- 人脸识别支付  暂时未开发 start -->
    <!-- <view class="list-item solid-bottom" v-if="support === 4 || support === 5">
        <text>{{i18n['人脸识别']}}</text>
        <switch
        @change="handleSwitch('is_default_face')"
        color="#F02523"
        :class="is_default_face ? 'checked' : ''"
        :checked="is_default_face ? true : false">
        </switch>
      </view> -->
    <!-- 人脸识别支付 end -->
    <!-- 网络监测 start -->
    <fu-notwork></fu-notwork>
    <!-- 网络监测 end -->
    <!-- 开启指纹支付 需要校验支付密码 start -->
    <FuPayKeyboard
      ref="passkeyborad"
      :show="passwordShow"
      :isFromPay="false"
      @close="payClose"
      @callback="verifyPassword"
    ></FuPayKeyboard>
    <!-- 开启指纹支付 需要校验支付密码 end -->
  </view>
</template>

<script>
import FuPayKeyboard from "../../components/fu-pay-keyboard/fu-pay-keyboard.vue"; //引入支付密码支付组件
export default {
  components: {
    FuPayKeyboard,
  },
  data() {
    return {
      couponModel: false, //取消生物检测弹框
      is_default_fingerprint: false, //是否开启指纹支付
      is_default_face: false, //是否开启 人脸识别支付
      passwordShow: false, //是否显示 密码验证组件
      support: 2,
    };
  },
  onLoad(options) {
    this.setNavigationBarTitle(this.i18n["生物检测"]);
    this.$util.biometrics().then((res) => {
      this.support = res;
    });
    if (global.userInfo) {
      this.is_default_fingerprint =
        global.userInfo.is_finger == 1 ? true : false;
    }
    
  },
  onShow(){
    this.checkIfPayPwd();
  },
  methods: {
    /**
     * 验证支付密码是否正确
     * @param {Object} pass 支付密码
     */
    verifyPassword(pass) {
      console.log(pass);
      this.$api
        .post(global.apiUrls.postUserBiological, {
          pay_password: pass,
          is_finger: this.is_default_fingerprint ? "1" : "0",
        })
        .then((res) => {
          console.log(res);
          this.passwordShow = false;
          this.$refs.passkeyborad.clear();
          if (res.data.code == 1) {
            this.updateUserInfo();
            if (this.is_default_fingerprint) {
              this.$message.info(this.i18n["开启成功"]);
              this.is_default_fingerprint = true;
            } else {
              this.$message.info(this.i18n["关闭成功"]);
              this.is_default_fingerprint = false;
            }
          } else {
            this.is_default_fingerprint = false;
            this.$message.info(res.data.msg);
            this.is_default_fingerprint = false;
          }
        });
    },

    /**
     * 关闭支付密码输入框
     */
    payClose() {
      this.is_default_fingerprint = false;
      this.passwordShow = false;
    },

    /**
     * @description  检测平台是否支持开启指纹支付
     */
    checkIsSupportSoterAuthentication() {
      const that = this;
      // #ifdef APP-PLUS || MP-WEIXIN
      /**
       * uni.checkIsSoterEnrolledInDevice : 获取设备内是否录入指纹信息
       *  checkAuthMode: 'fingerPrint', // 检验指纹信息
       * */
      uni.checkIsSoterEnrolledInDevice({
        checkAuthMode: "fingerPrint", // 检验指纹信息
        success(res) {
          if (res.isEnrolled == true) {
            /**
             * 开始 SOTER 生物认证
             * 执行成功，进行后续操作
             * */
            that.passwordShow = true;
          } else {
            that.showModalTip(that.i18n["此设备未录入指纹，请到设置中开启"]);
          }
        },
        fail(err) {
          that.showModalTip(that.i18n["此设备未录入指纹，请到设置中开启"]);
        },
      });
      // #endif
    },
    /**
     * @param {Object} tipDesc 消息提示内容
     */
    showModalTip(tipDesc) {
      const that = this;
      this.$util.showModal({
        title: that.i18n["温馨提示"],
        content: tipDesc,
        showCancel: false,
        success:  (res) => {
          that.is_default_fingerprint = false;
        },
      });
    },
    /**
     * 开启/关闭 指纹支付/人脸识别
     * @param {Object} type 开启/关闭 指纹支付/人脸识别
     */
    handleSwitch(type) {
      const that = this;
      if (type == "is_default_fingerprint" && !this[type]) {
        this.checkIsSupportSoterAuthentication();
      } else {
        this.$util.showModal({
          title: this.i18n["温馨提示"],
          content: this.i18n["你确定要关闭指纹支付吗？"],
          success:  (res) => {
            if (res.confirm) {
              that.verifyPassword();
            } else if (res.cancel) {
              that.is_default_fingerprint = true;
            }
          },
        });
      }
      this[type] = !this[type];
    },
    /**
     * @description 检测是否设置支付密码
     */
    checkIfPayPwd() {
      let that = this;
      this.$api
        .get(global.apiUrls.postUserCheck_pay_password)
        .then((res) => {
          if (res.data.code == 1) {
            // 是否设置了支付密码
            if (!res.data.data.falg) {
              that.$util.showModal({
                title: this.i18n["温馨提示"],
                content: this.i18n["您未设置支付密码，请设置支付密码？"],
                success: function (res) {
                  if (res.confirm) {
                    uni.navigateTo({
                      url: "/pages/index/setting/change-pay-password/index",
                    });
                  } else if (res.cancel) {
                    uni.navigateBack({
                      delta: 1,
                    });
                  }
                },
              });
            } else {
              uni.navigateTo({
                url: "/pages/index/setting/biological/index",
              });
            }
          } else {
            console.log(res);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    /* 更新用户信息 */
    updateUserInfo() {
      this.$api
        .post(global.apiUrls.postGetUserInfo, {
          user_id: (global.userInfo && global.userInfo.id) || 0,
        })
        .then((res) => {
          if (res.data.code == 1) {
            this.$store.commit("updateUserInfo", res.data.data);
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background-color: #ffffff;
  padding: 0 32rpx;

  //指纹列表 start
  .list-item {
    height: 100rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  //指纹列表 end
}

.model-notice-box {
  min-width: 500rpx;
  background-color: white;

  .title {
    height: 100rpx;
    text-align: center;
    line-height: 100rpx;
    font-size: 30rpx;
    font-family: PingFang SC;
    // font-weight: bold;
    // color: rgba(206, 133, 45, 1);
  }

  .content {
    padding: 0 32rpx 20rpx;
    color: #666666;
    font-size: 28rpx;
    margin: 0 auto;

    .desc {
      display: -webkit-box;
      /* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。*/
      -webkit-box-orient: vertical;
      /* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。*/
      text-overflow: ellipsis;
      /* 可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。*/
      -webkit-line-clamp: 1;
      overflow: hidden;
      min-height: 40rpx;
      width: 400rpx;
      text-align: left;
      margin: 0 auto;
      line-height: 40rpx;
    }
  }
  .bottom-content {
    width: 100%;
    line-height: 50rpx;
    padding-bottom: 10rpx;
    text-align: center;
    display: flex;

    .bottom {
      text-align: center;
      font-size: 24rpx;
      width: 150rpx;
      margin: 0 auto;
    }
  }
}
</style>
